<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>设置数字密码</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/aui.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/public_win.css" rel="stylesheet" type="text/css">
    <link href="../../css/public.css" rel="stylesheet" type="text/css">
    <style media="screen">
        .public_header:after {
            background: none;
        }

        .safety_lock {
            padding: 0 2.2rem;
            padding-top: 3.3rem;
        }

        .safety_lock .safety_lock_title {
            font-size: 0.9rem;
            font-weight: 500;
            color: rgba(0, 202, 207, 1);
            line-height: 1.1rem;
            padding-bottom: 1.2rem;
            text-align: center;
        }

        .safety_lock .safety_lock_message {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 2rem;
        }

        .safety_lock .safety_lock_message span {
            width: 0.6rem;
            height: 0.6rem;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(0, 202, 207, 1);
            margin: 0 0.5rem;
            border-radius: 100%;
        }

        .safety_lock .safety_lock_message span.active {
            background: rgba(0, 202, 207, 1);
        }

        .safety_lock_btn {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .safety_lock_btn .safety_lock_btn_item {
            width: 33.33%;
            align-items: center;
            position: relative;
        }

        .safety_lock_btn .safety_lock_btn_item:after {
            content: "";
            padding-top: 100%;
            display: block;
        }

        .safety_lock_btn .safety_lock_btn_item span {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 3.2rem;
            height: 3.2rem;
            line-height: 3.2rem;
            text-align: center;
            transform: translate(-50%, -50%);
            background: rgba(240, 251, 252, 1);
            border: 1px solid rgba(0, 202, 207, 1);
            font-size: 1.3rem;
            font-weight: 300;
            color: rgba(0, 202, 207, 1);
            border-radius: 100%;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <header>
            <div class="public_header public_line">
                <div class="back_img" tapmode onclick="fnBack()">
                    <img src="../../image/back.png">
                </div>
                <span class="public_title">设置数字密码</span>
                <div class="right_title_btn" tapmode @click="fnClearMessage()">清空</div>
            </div>
        </header>
        <div class="safety_lock">
            <p class="safety_lock_title" v-text="isNew?'再次输入4位数字密码':'请输入4位数字密码'"></p>
            <div class="safety_lock_message">
                <span :class="safety_lock.length>0?'active':''"></span>
                <span :class="safety_lock.length>1?'active':''"></span>
                <span :class="safety_lock.length>2?'active':''"></span>
                <span :class="safety_lock.length>3?'active':''"></span>
            </div>
            <div class="safety_lock_btn">
                <div class="safety_lock_btn_item" v-for="item in number" tapmode @click="fnSetMessage(item)">
                    <span>{{item}}</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript">
    var vm;
    var USER, $S;
    apiready = function() {
        USER = USER();
        $S = SERVICE();
        fnInit();
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                lockType: api.pageParam.lockType || "",
                closeWinName: api.pageParam.closeWinName || "",
                safety_lock: [],
                old_safety_lock: [],
                isNew: false,
                number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
            },
            methods: {
                fnSetMessage: function(key) {
                    if (this.safety_lock.length < 4) {
                        this.safety_lock.push(key);
                        if (this.safety_lock.length == '4') {
                            console.log(JSON.stringify(this.safety_lock) + "---" + JSON.stringify(this.old_safety_lock))
                            if (!this.isNew) {
                                if (this.lockType == "set") {
                                    this.isNew = true;
                                    this.old_safety_lock = this.safety_lock;
                                    this.safety_lock = [];
                                } else if (this.lockType == "verify") {
                                    //做密码校验
                                    fnVerifyLock()
                                }
                            } else {
                                if (this.safety_lock.toString() == this.old_safety_lock.toString()) {
                                    var safeValue = this.safety_lock.toString().replace(/,/g, "");
                                    api.execScript({
                                        name: 'mine/safety_lock_setting_win',
                                        frameName: 'mine/safety_lock_setting',
                                        script: 'fnSetLock("1","' + safeValue + '");'
                                    });
                                    fnDelayCloseWin("800");
                                } else {
                                    fnToast("两次密码不一致请重新输入！");
                                    this.safety_lock = [];
                                }
                            }
                        }
                    }
                },
                fnClearMessage: function() {
                    this.safety_lock = [];
                }
            }
        })
    }

    function fnVerifyLock() {
        $S.ShowProgress();
        var postData = {
            lockValue: vm.safety_lock.toString().replace(/,/g, "")
        }
        $S.POST("newAddInterface/getAppUserLockValue", postData, function(ret, err) {
            if (ret && ret.status == '200') {
                fnDelayCloseWin(0);
            } else {
                vm.fnClearMessage();
            }
            $S.CloseProgress();
        })

    }
    //页面返回
    function fnBack() {
        if (!api.pageParam.isSlidBack) {
            api.closeToWin({
                name: vm.closeWinName
            });
        } else {
            fnDelayCloseWin(0);
        }
    }
</script>

</html>
